import { Button, Form, Input, Toast, NavBar } from 'antd-mobile'
import {
  UserOutline,
  LockOutline,
  EyeInvisibleOutline,
  EyeOutline
} from 'antd-mobile-icons'
import { Link, useNavigate } from 'react-router-dom'
import { useState } from 'react'
import styles from './css/reg.module.css'
import { regApi } from '../../api/user'

// 账号 + 密码登录
function Account() {
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [form] = Form.useForm()
  const nav = useNavigate()

  // 表单的提交处理函数
  const onFormFinish = async (value) => {
    // 形参中的 value 就是表单校验通过后，需要提交给后端 API 接口的数据
    await regApi(value)
    Toast.show({
      icon: 'success',
      content: '注册成功！'
    })
  }

  return (
    <div className="pageHeader">
      <div style={{ position: 'relative', zIndex: 1, color: '#fff' }}>
        <NavBar onBack={() => nav(-1)}>注册新用户</NavBar>
      </div>
      <div className={styles.box}>
        <Form
          form={form}
          onFinish={onFormFinish}
          layout="horizontal"
          mode="card"
          requiredMarkStyle="none"
          style={{ '--prefix-width': 30 }}
          footer={
            <>
              <Button
                color="primary"
                block
                type="submit"
              >
                注册
              </Button>
              <div style={{ textAlign: 'right', marginTop: 15 }}>
                <Link to="/login">去登录</Link>
              </div>
            </>
          }
        >
          {/* 在表单组件中，name 是加给 Form.Item 的，而不是 Input */}
          <Form.Item
            label={<UserOutline />}
            name="username"
            rules={[
              { required: true, message: '请填写账号！' },
              { min: 2, max: 15, message: '账号长度为2-15个字符！' }
            ]}
          >
            <Input placeholder="请输入账号" />
          </Form.Item>
          <Form.Item
            label={<LockOutline />}
            name="password"
            rules={[
              { required: true, message: '请填写密码！' },
              { min: 6, max: 15, message: '密码长度为6-15个字符！' }
            ]}
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder="请输入密码"
              type={visible ? 'input' : 'password'}
            />
          </Form.Item>

          {/* 确认密码 */}
          <Form.Item
            label={<LockOutline />}
            name="repassword"
            // 是否值展示第一个错误消息
            validateFirst={true}
            rules={[
              { required: true, message: '请填写密码！' },
              { min: 6, max: 15, message: '密码长度为6-15个字符！' },
              {
                // 自定义的校验器
                // 形参中的 p2 是确认密码框的值
                validator(_, p2) {
                  // 拿着第一个密码值，和第二个密码值进行判断
                  // 如果两个值相同，则需要 return Promise.resolve()
                  // 否则，如果两个密码值不同，则需要 return Promise.reject()
                  // 校验失败
                  // return Promise.reject()
                  // 校验成功
                  // return Promise.resolve()

                  // 获取第一个密码框的值
                  const p1 = form.getFieldValue('password')

                  if (p1 === p2 && p1?.length >= 6) {
                    // 校验通过
                    return Promise.resolve()
                  } else {
                    // 校验不通过
                    return Promise.reject()
                  }
                },
                // 错误消息
                message: '两次密码不一致！'
              }
            ]}
            // 确认密码框是否需要重新校验，依赖与 password 值的变化
            dependencies={['password']}
            extra={
              <div>
                {!visible2 ? (
                  <EyeInvisibleOutline onClick={() => setVisible2(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible2(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder="请确认密码"
              type={visible2 ? 'input' : 'password'}
            />
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Account
